<template>
  <div class="KH_container">
    
    <div class="order-detail-box clearfix d-table bgWhite ">
      <div class="f_18">付款信息</div>
      <div class="paddingL30">
        <div class="left ">
          
          
          <ul class="clearfix marginT10">
            <li class="margin0">
              <label>收益预估：</label>
              <strong>￥{{info.profit}}</strong>
            </li>
            <li>
              <label>服务类型：</label>
              <span>{{info.clue_type_name}}</span>
            </li>
            <li>
              <label>线索编号：</label>
              <span id="clueNo">{{info.clue_no}}</span>
            </li>
            <li>
              <label>分发时间：</label>
              <span>{{info.created_at}}</span>
            </li>
          </ul>
        </div>
        <div class="right marginT10">
          <ul class="clearfix">
            <li  class="margin0">
              <label>客户名称：</label>
              <strong class="clue-c-name">
                <span>{{info.company_info?info.company_info.tm_regpeople_name:'暂无'}}</span>
                <a class="icon-search"></a>
              </strong>
            </li>
            <li>
              <label>联系方式：</label>
              <span>{{info.company_info?info.company_info.phone:'暂无'}}</span>
            </li>
            <li>
              <label>电子邮箱：</label>
              <span>{{info.company_info?info.company_info.email:'暂无'}}</span>
            </li>
            <li>
              <label>客户地址：</label>
              <span>{{info.company_info?info.company_info.address:'暂无'}}</span>
            </li>
            <li>
              <label>服务参考价：</label>
              <strong>{{info.ref_fee}}</strong>
              <span
                class="thread-span"
              >(官费：{{info.official_fee}}元 服务费：{{info.ref_fee-info.official_fee}}元)</span>
            </li>
          </ul>
        </div>
      </div>
      
    </div>
    <div class="order-detail-box bgWhite">
      <div class="f_18">商标信息</div>
      <div class="brand-info-box paddingL30" >
        <div class="brand-img">
          <img
            :src="info.tm_info?info.tm_info.trademark_img:$app.defImag404"
            @error="$app.defImag"
          />
        </div>
        <div class="brand-info">
          <ul>
            <li>
              <span>商标名称：{{info.tm_info?info.tm_info.trademark_name:'暂无'}}</span>
            </li>
            <li>申请号：{{info.tm_info?info.tm_info.register_number:'暂无'}}</li>
            <li>法律状态：{{info.tm_info?info.tm_info.state_name:'暂无'}}</li>
            <li>商标分类：{{info.tm_info?info.tm_info.inter_type:'暂无'}}-{{info.tm_info?info.tm_info.inter_type_name:'暂无'}}</li>
            <li>注册公告日：{{info.tm_info?info.tm_info.register_inspe_anno_date:'暂无'}}</li>
            <li>专用权期限：{{info.tm_info?info.tm_info.spe_period_begin_date:'暂无'}} 至 {{info.tm_info?info.tm_info.spe_period_end_date:'暂无'}}</li>
          </ul>
          <div class="nice-box">
            <h3>商品服务项目：</h3>
            <div class="nice-ul clearfix">
              <span
                v-for="(item,index) in info.tm_info?info.tm_info.goods_list:''"
                :key="index"
              >{{item.fcgnum}} {{item.good_name}}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="order-detail-box bgWhite">
      <div class="f_18">业务介绍</div>
      <div
        class="paddingL30 lineH2"
      >注册商标有效期10年，期满前12个月申请续展，期满后6个月申请宽展，未申请续展或宽展的，商标将在有效期结束后被注销，品牌将不再受商标保护。</div>
    </div>
    <div class="order-detail-box clue-remark bgWhite">
      <div class="f_18">
        沟通记录
        <a href="javascript:void(0)" @click="showModel" class="add-remark f_14 marginL10">编辑备注</a>
      </div>
      <div class="paddingL30 lineH2">
        <template v-for="(remarkItem,index) in info.contact_log">
          <Row :gutter="15">
            <Col :span="3" class="cBlue f_16 f_bold">{{remarkItem.type==1?'重要意向':remarkItem.type==2?'一般意向':'暂未接通'}}</Col>
            <Col :span="4">{{remarkItem.created_at}}</Col>
            <Col :span="16">备注：{{remarkItem.remark}}</Col>
          </Row>
        </template>
      </div>
    </div>

    <Modal
      class="boxLbb"
      class-name="vertical-center-modal"
      :mask-closable="false"
      :footer-hide="true"
      v-model="modal1"
      title="添加备注"
      @on-visible-change="vBC"
    >
      <div class="add-remark-form">
        <ul class="clearfix">
          <li :class="{'active':type==1}" @click="type=1">重要意向</li>
          <li :class="{'active':type==2}" @click="type=2">一般意向</li>
          <li :class="{'active':type==3}" @click="type=3">暂无接通</li>
        </ul>
        <div class="r-text">
          <textarea
            v-model="remark"
            placeholder="记录您的备注信息"
            name="remark"
            id="tip-remark"
            maxlength="150"
          ></textarea>
          <span class="word-num">
            <i id="hasLen">{{remark.length}}</i>/150
          </span>
        </div>
        <div class="marginT10 textRight">
          <Button type="primary" @click="add">确定</Button>
        </div>
      </div>
    </Modal>
  </div>
</template>
<style lang="less">
.vertical-center-modal {
  display: flex;
  align-items: center;
  justify-content: center;

  .ivu-modal {
    top: 0;
  }
}
</style>
<script>
export default {
  name: "clueInfo",
  data() {
    let{
      $route:{
        query:{
          clue_id
        }
      }
    }=this;
    
    
    let data={
      clue_id,// 线索lid
      modal1: false, //是否显示
      remark: "", // 备注信息
      type: 0, // 备注类型
      info: "" // 线索详情
    };
    return data;
  },
  created() {
    this.getClueInfo();
  },
  methods: {
    // 显示model
    showModel() {
      this.modal1 = true;
    },
    // 添加备注
    add() {
      const {clue_id, type, remark } = this;

      if(type!=0){
        const chat_time = "";
        $ajax.lb_getClueContactLog({ clue_id, type, chat_time, remark }, res => {
          $app.toast(res.msg, true);
          this.getClueInfo();
          this.modal1 = false;
        });
      }else{
        this.$Message.error({content:'请选择意向类型'});
      }

      
    },
    vBC(buEr){
      if(!buEr){
        this.type=0;
        this.remark='';
      }
    },
    // 获取线索信息
    getClueInfo() {
      let {
        clue_id
      }=this;

      $ajax.lb_getClueInfo({ clue_id }, res => {
        this.info = res.data;
      });
    }
  }
};
</script>

